<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
   <link rel="stylesheet" href="css/base.css">
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="dist/css/swiper.min.css">
   <link rel="stylesheet" href="css/shouye.css">
  



</head>
<body>
    <div id="head_wrap">
        <header>
            <div class="left">
                <h3>汇聚每一个感动</h3>
            </div>
            <ul class="right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li> <a href="#"> 我的订单 </a> </li>
                <li>
                    <a href="#">
                        <i class="bg-icon"></i>
                         手机购票
                    </a>
                    <img src="img/show.png" alt="">
                </li>
                <li>
                    <a href="#">
                        网站导航
                        <i class="bg-icon_nav"></i>
                        <span>
                            <h3>频道</h3>
                            <ul>
                                <li>聚特惠</li>
                                <li>欢聚橙卡</li>
                                <li>明星库</li>
                                <li>剧目库</li>
                                <li>积分商城</li>
                                <li>聚特惠</li>
                            </ul>
                        </span>
                    </a>
                </li>
            </ul>

        </header>
    </div>
    <section>
        <div class='top'>
       
              <img src="img/juooo_logo.png" alt="">
           
        </div>
        <div class='local'>
            <a>全国</a>
            <i class='bg-icon-city'></i>
            <div>
                <i></i>
                <h4>推荐全国站</h4>
            </div>
            <div class='city'>
                <a>全国</a>
                <i class='bg-icon-city'></i>
                <span>当前全国共有<b>3448</b>场演出，城市后数字代表演出场次</span>
              
                <h3><a>全国</a></h3>
            </div>
        </div>
         <form action="">
            <input type="text" placeholder="小猪佩奇">
            <input type="button" >
            <i class='bg-icon-suoso'></i>
            <ul>
                <li>大爱</li>
                <li>李荣浩</li>
                <li>王心凌</li>
                <li>小猪佩奇</li>
                <li>林宥嘉</li>
                <li>GRLYSON</li>
                <li>动力火车</li>
            </ul>
         
        </form>
     
    </section>
    <nav>
        <ul class='nav_list1'>
            <li><a href="">全部商品分类</a></li>
            <li><a href="">流行音乐</a></li>
            <li><a href="">古典音乐</a></li>
            <li><a href="">舞台剧</a></li>
            <li><a href="">儿童亲子</a></li>
            <li><a href="">音乐剧</a></li>
            <li><a href="">橙PLUS卡</a></li>
        </ul>
        <ul class='nav_list2'>
            <li>
                <a href="">
                    <i></i>
                   演唱会
                   <b></b>
                </a>
               
            </li>
            <li>
                 <a href="">
                    <i></i>
                   音乐会 
                   <b></b>
                </a>
                
            </li>
            <li>
                 <a href="">
                    <i></i>
                  话剧歌剧
                  <b></b>
                </a>
                
            </li>
            <li>
                 <a href="">
                    <i></i>
                   儿童亲子
                   <b></b>
                </a>
               
            </li>
            <li>
                 <a href="">
                    <i></i>
                   音乐剧
                   <b></b>
                </a>
              
            </li>
            <li>
                 <a href="">
                    <i></i>
                    戏曲综艺
                    <b></b>
                </a>
                
            </li>
            <li>
                 <a href="">
                    <i></i>
                    展览
                    <b></b>
                </a>
                
            </li>

        </ul>

        <img src="img/rAoKmVx2ADiAC1pCAALNy_XVkMI911.gif" alt="">
    </nav>
     <div id="ban_wrap">
        <div id="banner">
                <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="img/1.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="img/2.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="img/3.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="img/4.png" alt=""></div>
                            <div class="swiper-slide"><img src="img/5.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="img/6.jpg" alt=""></div>
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                  
        </div>
    </div>
    <div id="case">
        <a href="">
            <div></div>
            <span>
                <p>积分商城</p>
                <p>用积分，享0元购票</p>
            </span>
        </a>
        <a href="">
            <div></div>
            <span>
                
               <p>欢聚橙卡 </p> 
                <p>33元起看演出</p>
                <b></b>
            </span>
            
        </a>
        <a href="">
            <div></div>
            <span>
               <p>聚特惠 </p> 
               <p>优惠不知一点点</p>
            </span>
          
        </a>
        <a href="">
            <div></div>
            <span>
                <p>学生专区</p>
                <P>学生购票，低至5折</P>
                <b></b>
             </span>
             
        </a>
        <a href="">
            <div></div>
            <span>
                <p>精彩专题</p> 
                <p>演出专题，精彩汇聚</p>
            </span>
            
        </a>
        <a href="">
            <div></div>
            <span>
                <p> 演出日历</p>
                <p> 演出信息，一目了然</p>
             </span>
            
        </a>


    </div>
    <main>
        <div class="part1">
            <div class="left">
               <div class='top'>
                   <span></span>
                   <p>全国</p>
                   <p>[其他城市]</p>
               </div>
               <div class="bottom">
                    <dl>
                        <dt>
                            <img src="img/t1.jpg" alt="">
                            <div>
                                <i></i>  <a href="">南山问题中心剧院大剧场</a>
                               
                                <i></i>  <a href="">2019.06.01 10：30</a>
                            </div>
                        
                        </dt>
                        <dd>
                            <span>【乐童&小橙堡】佳能炫飞2019英语正版引进《小猪佩奇舞台剧--》...</span>
                            <span>
                                <h3>儿童亲子</h3>
                                <h3><b>￥</b><b>80</b>起</h3>
                            </span>

                        </dd>
                    </dl>
                     <dl>
                        <dt><img src="img/t2.jpg" alt="">
                            <div>
                                <i></i>  <a href="">南山问题中心剧院大剧场</a>
                               
                                <i></i>  <a href="">2019.06.01 10：30</a>
                            </div>
                            
                        </dt>
                        <dd>
                            <span>【乐童&小橙堡】佳能炫飞2019英语正版引进《小猪佩奇舞台剧--》...</span>
                            <span>
                                <h3>话剧歌剧</h3>
                                <h3><b>￥</b><b>90</b>起</h3>
                            </span>
                        </dd>
                    </dl>
                     <dl>
                        <dt>
                            <img src="img/t3.jpg" alt="">
                            <div>
                                <i></i>  <a href="">南山问题中心剧院大剧场</a>
                               
                                <i></i>  <a href="">2019.06.01 10：30</a>
                            </div>
                        </dt>
                        <dd>
                            <span>【乐童&小橙堡】佳能炫飞2019英语正版引进《小猪佩奇舞台剧--》...</span>
                            <span>
                                <h3>音乐剧</h3>
                                <h3><b>￥</b><b>100</b>起</h3>
                            </span>
                        </dd>
                    </dl>
                    <dl>
                            <dt>
                                <img src="img/t4.jpg" alt="">
                                <div>
                                <i></i>  <a href="">南山问题中心剧院大剧场</a>
                               
                                <i></i>  <a href="">2019.06.01 10：30</a>
                            </div>
                            </dt>
                            <dd>
                                <span>【乐童&小橙堡】佳能炫飞2019英语正版引进《小猪佩奇舞台剧--》...</span>
                                <span>
                                <h3>音乐剧</h3>
                                <h3><b>￥</b><b>280</b>起</h3>
                            </span>
                            </dd>
                        </dl>

               </div>



            </div>    
            <div class="right">
                <div>
                    <span></span>
                    <p>专题推荐</p>
                    <p>&gt;</p>
                </div>
                <div>
                    <dl>
                        <dt><img src="img/t5.jpg" alt=""></dt>
                        <dd>2019第六届城市戏剧节</dd>
                    </dl>
                </div>
                <div>
                    <p>· 橙plus卡</p>
                </div>
                <ul>
                    <li><a href=''>大爱</a></li>
                    <li><a href=''>李荣浩</a></li>
                    <li><a href=''>王心凌</a></li>
                    <li><a href=''>小猪佩奇</a></li>
                </ul>
            </div>
        </div>



    </main>
    <div id="foot_wrap">
        <footer>
            <div class="top">
                <div class="left">
                    <h3>帮助中心</h3>
                    <ul>
                        <li><a href="javescript:;">新手指南</a></li>
                        <li><a href="javescript:;">支付方式</a></li>
                        <li><a href="javescript:;">售后服务</a></li>
                        <li><a href="javescript:;">购票指南</a></li>
                        <li><a href="javescript:;">配送方式</a></li>
                    </ul>
                </div>
                <div class="middle">
                    <p>400-185-8666</p>
                    <p>周一至周五：08：30-20：00</p>
                    <p>周末：0830：18：00</p>
                </div>
                <div class="right">
                   <div>
                       <img src="img/tt1.png" alt="">
                       <span>聚橙票务</span>
                   </div>
                   <div>
                    <img src="img/tt2.png" alt="">
                    <span>聚橙演艺</span>
                   </div>
                </div>
            </div>
         <div class="bottom">
             <ul>
                <li><a href='javascript:;'>聚橙旗下子品牌:</a></li>
                 <li><a href='javascript:;'>小橙堡</a></li>
                 <li><a href='javascript:;'>万有音乐系</a></li>
                 <li><a href='javascript:;'>聚橙音乐剧</a></li>
             </ul>
             <ul>
                 <li><a href="javascript:;">关于我们</a></li>
                 <li><a href="javascript:;">联系我们</a></li>
                 <li><a href="javascript:;">加入我们</a></li>
                 <li><a href="javascript:;">服务条款</a></li>
                 <li><a href="javascript:;">媒体报道</a></li>
                 <li><a href="javascript:;">合作伙伴</a></li>
                 <li><a href="javascript:;">友情链接</a></li>
                 <li><a href="javascript:;">网站地图</a></li>
             </ul>
             <p>Copyright 2007-2019 &copy;深圳市聚橙演艺联盟票务有限公司|粤ICP备17063893号-2粤公网安备44030502000578号</p>

             <div class='last'>
                 <i></i>
                 <i></i>
             </div>

         </div>
        
        </footer>
</div>
</body>
</html>
<script src="dist/js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
    });
</script> 
